{extend name="public/base"/}
{block name="body"}
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2>菜单排序 [ <a href="{:url('index',array('pid'=>I('pid')))}">返回列表</a> ]</h2>
		</div>
	</header>
	<div class="main-box-body clearfix">
		<form action="{:url('sort')}" method="post" class="form form-horizontal">
			<div class="form-group">
				<div class="col-lg-2">
					<select value="" size="8" class="form-control">
						{volist name="list" id="vo"}
							<option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
						{/volist}
					</select>
				</div>
				<div class="col-lg-2">
					<button class="top btn btn-primary btn-block" type="button"><i class="fa fa-arrow-up"></i> 第 一</button>
					<button class="up btn btn-primary btn-block" type="button"><i class="fa fa-chevron-up"></i> 上 移</button>
					<button class="down btn btn-primary btn-block" type="button"><i class="fa fa-chevron-down"></i> 下 移</button>
					<button class="bottom btn btn-primary btn-block" type="button"><i class="fa fa-arrow-down"></i> 最 后</button>
				</div>
			</div>
			<div class="sort_bottom form-group">
				<div class="col-lg-12">
					<input type="hidden" name="ids">
					<button class="sort_confirm btn btn-primary submit-btn" type="button">确 定</button>&nbsp;
					<button class="sort_cancel btn btn-dafault btn-return" type="button" url="{$Think.cookie.__forward__}">返 回</button>
				</div>
			</div>
		</form>
	</div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
	$(function(){
		sort();
		$(".top").click(function(){
			rest();
			$("option:selected").prependTo("select");
			sort();
		})
		$(".bottom").click(function(){
			rest();
			$("option:selected").appendTo("select");
			sort();
		})
		$(".up").click(function(){
			rest();
			$("option:selected").after($("option:selected").prev());
			sort();
		})
		$(".down").click(function(){
			rest();
			$("option:selected").before($("option:selected").next());
			sort();
		})
		$(".search").click(function(){
			var v = $("input").val();
			$("option:contains("+v+")").attr('selected','selected');
		})
		function sort(){
			$('option').text(function(){return ($(this).index()+1)+'.'+$(this).text()});
		}

		//重置所有option文字。
		function rest(){
			$('option').text(function(){
				return $(this).text().split('.')[1]
			});
		}

		//获取排序并提交
		$('.sort_confirm').click(function(){
			var arr = new Array();
			$('.ids').each(function(){
				arr.push($(this).val());
			});
			$('input[name=ids]').val(arr.join(','));
			$.post(
				$('form').attr('action'),
				{
				'ids' :  arr.join(',')
				},
				function(data){
					if (data.status) {
                        updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
                    }else{
                        updateAlert(data.info,'alert-success');
                    }
                    setTimeout(function(){
                        if (data.status) {
                        	$('.sort_cancel').click();
                        }
                    },1500);
				},
				'json'
			);
		});

		//点击取消按钮
		$('.sort_cancel').click(function(){
			window.location.href = $(this).attr('url');
		});
	})
</script>
{/block}